<template>
    <div class="marketing_seckill_detail">
        <div class="header">
            <div class="flex_top">
                <div>
                    <span class="title">{{ detailObj.name }}</span>
                    <span v-if="detailObj?.activityStatusName?.realStatus === 1" class="waiting status">未开始</span>
                    <span v-if="detailObj?.activityStatusName?.realStatus === 2" class="progressing status">
                        进行中
                    </span>
                    <span v-if="detailObj?.activityStatusName?.realStatus === 3" class="ending status">已结束</span>
                    <span
                        v-if="
                            detailObj?.activityStatusName?.realStatus === 3 &&
                            detailObj.updatedAt !== detailObj.activityEndTime
                        "
                        class="endTime"
                        >（手动结束时间：{{ detailObj.updatedAt }}）</span
                    >
                </div>
                <div class="actions">
                    <el-popover
                        popper-class="custom-skill-popover"
                        placement="bottom"
                        :visible="popVisible"
                        width="400">
                        <template #reference>
                            <el-button
                                type="primary"
                                v-auth="'seckill_list:spread'"
                                v-show="[1, 2].includes(detailObj?.activityStatusName?.realStatus)"
                                @click="spreadHandler">
                                推广
                            </el-button>
                        </template>
                        <SpreadBox
                            v-if="popVisible"
                            :path="path"
                            :params="params"
                            :downloadName="downloadName"
                            :popoverFn="popoverVisibleHandler" />
                    </el-popover>
                    <el-popconfirm hide-icon @confirm="changeStatusActivityHandler(1)" title="确定结束?">
                        <template #reference>
                            <el-button
                                v-auth="'seckill_list:end'"
                                v-show="[1, 2].includes(detailObj?.activityStatusName?.realStatus)"
                                @click="endHandler">
                                结束
                            </el-button>
                        </template>
                    </el-popconfirm>
                    <el-popconfirm hide-icon @confirm="changeStatusActivityHandler(2)" title="确定删除?">
                        <template #reference>
                            <el-button
                                v-auth="'seckill_list:delete'"
                                v-show="[3].includes(detailObj?.activityStatusName?.realStatus)"
                                size="small">
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </div>
            <div class="create">
                <el-row>
                    <el-col :span="12">
                        <div>
                            <b class="label">创建人：</b>
                            <span class="content_font">{{ detailObj.createdUidName }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>
                            <b class="label"> 创建时间： </b>
                            <span class="content_font">{{ detailObj.createdAt }}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="container">
            <el-tabs class="demo-tabs" v-model="activeTab">
                <el-tab-pane label="数据统计" name="1">
                    <STATS :data="detailObj.basicData"></STATS>
                </el-tab-pane>
                <el-tab-pane label="活动详情" name="2">
                    <INFO :data="detailObj"></INFO>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="bottom">
            <div class="bottom_btns">
                <el-button @click="closeHandler"> 关闭 </el-button>
            </div>
        </div>
    </div>
</template>

<script setup name="seckilldetail">
import { reactive, onMounted, onUnmounted, ref, inject } from 'vue';
import { setLayout, resetLayout } from '@/hooks/layout';
import request from '@/request/index';
import storage from '@/commons/storage';
import INFO from './info.vue';
import STATS from './stats.vue';
import { downloadImgHandler } from '@/commons/utils';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import SpreadBox from '@/components/SpreadBox.vue';

const confirm = inject('confirm');
const router = useRouter();
const route = useRoute();
let activeTab = '2';
const query = route.query;
const id = route.query.id;
activeTab = String(route.query.tab) || '2';
const closeHandler = () => {
    router.replace('/marketing/seckill');
};
let detailObj = reactive({});
const queryActivityInfo = () => {
    request('seckillDetailServ', { id: route.query.id }).then(res => {
        detailObj = Object.assign(detailObj, res.data);
    });
};
queryActivityInfo();

const popoverVisibleHandler = () => {
    popVisible.value = false;
};

let popVisible = ref(false);
let path = ref();
let params = ref();
let downloadName = ref();
const spreadHandler = async () => {
    if (popVisible.value) {
        return;
    }

    path.value = 'pages-cart/good/index';
    params.value = `goodsId=${detailObj.goodsId}&goodsNo=${detailObj.goodsNo}&shopId=${storage.get(
        'ZW-SHOPID'
    )}&activityId=${detailObj.id}`;
    downloadName.value = detailObj?.name;

    popVisible.value = true;
};

const changeStatusActivityHandler = status => {
    const requestName = status === 2 ? 'deteleSeckillServ' : 'endSeckillServ';
    request(requestName, { id: detailObj.id }).then(res => {
        ElMessage.success(`操作成功`);
        if (status === 2) {
            router.replace('/marketing/seckill');
        } else {
            queryActivityInfo();
        }
    });
};

onMounted(() => {
    setLayout();
});
onUnmounted(() => {
    resetLayout();
});
</script>

<style lang="scss">
.custom-skill-popover {
    padding: 0 !important;
}
</style>
<style lang="scss" scoped>
.marketing_seckill_detail {
    :deep(.el-tabs__nav-wrap::after) {
        height: 1px;
    }
    .label {
        font-size: 14px;
        font-weight: 400;
        color: #969696;
    }
    .content_font {
        color: #33302d;
        font-size: 14px;
    }
    .header {
        margin-bottom: 16px;
        padding: 24px;
        background-color: #ffffff;
        .flex_top {
            display: flex;
            justify-content: space-between;
        }
        .title {
            font-size: 16px;
            font-weight: 600;
            color: #33302d;
            line-height: 16px;
            margin-right: 8px;
        }
        .status {
            width: 62px;
            height: 22px;
            border-radius: 2px;
            font-size: 14px;
            line-height: 20px;
            padding: 1px 10px;
        }
        .waiting {
            background: #f4f4f4;
            color: #cccccc;
        }
        .progressing {
            background: #ecf9fd;
            color: #2fb6e4;
        }
        .ending {
            background: #fff1ed;
            color: #ff4a1a;
        }
        .endTime {
            margin-left: 8px;
            font-size: 12px;
            font-weight: 400;
            color: #969696;
            line-height: 14px;
        }
        .create {
            margin-top: 20px;
        }
    }
    .container {
        background-color: #ffffff;
        padding: 24px;
        min-height: calc(100vh - 409px);
    }
    .bottom {
        bottom: 24px;
        width: 100%;
        text-align: center;
        left: 0;
        margin-top: 16px;
        .bottom_btns {
            padding: 11px;
            margin: auto;
            background: #ffffff;
        }
    }
}
</style>
